<template>
	<div class="dashboard-container">
		<div class="role">
			<div class="sea">
				<div class="item">
					<el-form label-width="80px">
						<el-row :gutter="12">
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item  label="状态">
									<el-select v-model="status" clearable @change="search" style="width: 70%;" placeholder="请选择状态" >
										<el-option
											v-for="(item,index) in status_list"
											:key="index"
											:label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="模块">
									<el-select v-model="module" clearable @change="search" style="width: 70%;" placeholder="请选择状态">
										<el-option
											v-for="(item,index) in module_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="出现概率">
									<el-select v-model="probability" clearable @change="search" style="width: 70%;" placeholder="请选择责任人">
										<el-option
											v-for="(item,index) in probability_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="类别">
									<el-select v-model="type" clearable @change="search" style="width: 70%;" placeholder="请选择借用人">
										<el-option
											v-for="(item,index) in type_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>

								</el-form-item>
							</el-col>

						</el-row>
					</el-form>
				</div>
				<div class="item">
					<el-form label-width="80px">
						<el-row :gutter="12">
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="问题类型">
									<el-select v-model="bug_type" clearable @change="search" style="width: 70%;" placeholder="请选择位置">
										<el-option
											v-for="(item,index) in bug_type_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="平台">
									<el-select v-model="os" clearable @change="search" style="width: 70%;" placeholder="请选择状态">
										<el-option
											v-for="(item,index) in os_type_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="服务器">
									<el-select v-model="service" clearable @change="search" style="width: 70%;" placeholder="请选择责任人">
										<el-option
											v-for="(item,index) in service_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="销售区域">
									<el-select v-model="area" clearable @change="search" style="width: 70%;" placeholder="请选择借用人">
										<el-option
											v-for="(item,index) in area_list"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>

								</el-form-item>
							</el-col>

						</el-row>
					</el-form>
				</div>
				<div class="item">
					<el-row :gutter="10">
						<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
							<span>关键字</span>
							<el-input v-model="keywords" clearable placeholder="请输入关键字" style="width: 40%;" @change="search"></el-input>
							<el-button type="primary" @click="search">查询</el-button>
						</el-col>
						<el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="2" v-if="power.includes('prototype_add')">
							<el-button type="primary" @click="add">新 增</el-button>
						</el-col>
					</el-row>
				</div>
			</div>

			<div class="tab">
				<el-table
					v-if="initTableList"
					class="marT"
					:data="initTableList.slice((current-1)*size, current*size)"
					:border="true"
					:header-cell-style="{background:'#eef1f6'}">
					<el-table-column
						align="center"
						type="index"
						label="序号"
						width="50">
					</el-table-column>
					<el-table-column align="center" property="_id" label="ID" width="200"></el-table-column>
					<el-table-column align="center" property="project" label="项目" width="200"></el-table-column>
					<el-table-column align="center" property="problem_type" label="问题类型" width="200"></el-table-column>
					<el-table-column align="center" property="outline" label="概要" width="200"
									 :show-overflow-tooltip="true"></el-table-column>
					<el-table-column align="center" property="status" label="状态" width="200">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status == 0" effect="dark">待指派</el-tag>
							<el-tag v-if="scope.row.status == 1" type="success" effect="dark">待验证</el-tag>
							<el-tag v-if="scope.row.status == 2" type="info" effect="dark">已关闭</el-tag>
							<el-tag v-if="scope.row.status == 3" type="warning" effect="dark">驳回</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" property="assign_handler.name" label="指派处理人" width="200">
					</el-table-column>
					<el-table-column align="center" property="module" label="模块" width="200"></el-table-column>
					<el-table-column align="center" property="priority" label="优先级" width="200"></el-table-column>
					<el-table-column align="center" property="area" label="销售区域" width="200"></el-table-column>
					<el-table-column
						property="probability"
						align="center"
						width="150"
						label="出现概率">
					</el-table-column>
					<el-table-column
						property="type"
						align="center"
						width="150"
						label="类别">
					</el-table-column>
					<el-table-column
						property="bug_type"
						align="center"
						width="150"
						label="BUG类型">
					</el-table-column>
					<el-table-column
						property="os"
						align="center"
						width="250"
						label="平台">
					</el-table-column>
					<el-table-column
						property="firmware_version"
						align="center"
						width="150"
						label="固件版本">
					</el-table-column>
					<el-table-column
						property="software_version"
						align="center"
						width="150"
						label="软件版本">
					</el-table-column>
					<el-table-column
						property="service"
						align="center"
						width="150"
						label="米家服务器">
					</el-table-column>
					<el-table-column
						property="desc"
						align="center"
						width="250"
						show-overflow-tooltip
						label="详细描述">
					</el-table-column>
					<el-table-column
						property="discovery_version"
						align="center"
						width="250"
						label="发现版本">
					</el-table-column>
					<el-table-column
						property="submitter"
						align="center"
						width="250"
						label="提交人">
					</el-table-column>
					<el-table-column
						property="handler"
						align="center"
						width="250"
						label="处理人">
					</el-table-column>
					<el-table-column
						property="cc"
						align="center"
						width="250"
						label="抄送">
					</el-table-column>
					<el-table-column align="center" property="own" label="创建信息" width="200">
						<template slot-scope="scope">
						<span>{{getLeader(scope.row.creator_show)}}<br>
							<span style="font-size: 10px;">{{getTime(scope.row.create_time)}}</span>
						</span>
						</template>
					</el-table-column>
					<el-table-column align="center" property="tester_show" label="更新信息" width="200">
						<template slot-scope="scope">
							<span>{{getName(scope.row.updated_by) }}</span><br>
							<span>{{getTime(scope.row.update_time) }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作" fixed="right" width="280">
						<template slot-scope="scope">
							<span><a @click="toDetails(scope.row)">查看</a></span>
							<span v-if="power.includes('bug_assign') && scope.row.status == 0 || scope.row.status == 1"><a > | </a></span>
							<span v-if="power.includes('bug_assign') && scope.row.status == 0 || scope.row.status == 1"><a @click="assign(scope.row)">指派</a></span>
							<span v-if="power.includes('bug_rebut') && scope.row.status == 0"><a > | </a></span>
							<span v-if="power.includes('bug_rebut') && scope.row.status == 0"><a @click="rebut(scope.row)">驳回</a></span>
							<span v-if="power.includes('bug_verification') && scope.row.status == 1 && scope.row.can_verification == 1"><a > | </a></span>
							<span v-if="power.includes('bug_verification') && scope.row.status == 1 && scope.row.can_verification == 1"><a @click="verification(scope.row)">验证</a></span>
							<span v-if="scope.row.status == 3"><a > | </a></span>
							<span v-if="scope.row.status == 3"><a @click="edit(scope.row)">编辑</a></span>
							<span><a > | </a></span>
							<span><a @click="recode(scope.row)">操作记录</a></span>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="tableSize"
					@size-change="tableSizeChange"
					@current-change="tableCurrentChange"
					:current-page="tableCurrent"
					style="text-align: center;height: 100px;"
					:total="tableTotal">
				</el-pagination>
			</div>
			<seeForm ref="seeForm" @func="test"></seeForm>
			<assignForm ref="assignForm"></assignForm>
			<lineForm ref="lineForm"></lineForm>
			<rebutForm ref="rebutForm"></rebutForm>
			<verificationForm ref="verificationForm"></verificationForm>
			<bugForm ref="bugForm" @func="test"></bugForm>
		</div>
	</div>
</template>

<script>
import seeForm from './model/seeForm'
import { bug, bugOptions } from '@/api/user'
import assignForm from "./model/assignForm";
import lineForm from "./model/line";
import rebutForm from "./model/rebutForm";
import bugForm from "../testTask/model/bugForm";
import verificationForm from "./model/verificationForm";
export default {
	name: 'Dashboard',
	components: {
		seeForm,
		assignForm,
		lineForm,
		rebutForm,
		verificationForm,
		bugForm
	},
	data() {
		return {
			receiveUser:'',
			own:'',
			value: '',
			size: 10,
			current: 1,
			total: 0,
			initTableList: [],
			tableSize:10,
			tableCurrent:1,
			tableTotal:1,
			keywords:'',

			status:'',
			module:'',
			probability:'',
			type:'',
			bug_type:'',
			os:'',
			service:'',
			area:'',

			power:[],
			status_list:[],
			module_list:[],
			probability_list:[],
			type_list:[],
			bug_type_list:[],
			os_type_list:[],
			service_list:[],
			area_list:[],
			pending:false
		}
	},
	mounted () {

	},
	created() {
		this.pending = this.$route.query.pending
		this.initTable()
	},
	methods: {
		// 新增bug
		add(){
			this.$refs.bugForm.dialogFormVisible = true
			this.$refs.bugForm.initData(5)
		},
		test(){
			this.initTable()
		},
		getTime(data){
			if(data){
				var d = new Date(data);
				var d2 = d.getTime() - 8 * 60 * 60 * 1000
				d = new Date(d2)
				var  resDate = d.getFullYear() + '-' +
					((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
					(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
					(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
					(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
					(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());
				return resDate
			}else {
				return '暂无'
			}
		},
		search(){
			bug({
				keywords:this.keywords,
				status:this.status,
				module:this.module,
				probability:this.probability,
				type:this.type,
				bug_type:this.bug_type,
				os:this.os,
				service:this.service,
				area:this.area,
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			bug({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		initTable(){
			this.status_list=[]
			this.module_list=[]
			this.probability_list=[]
			this.type_list=[]
			this.bug_type_list=[]
			this.os_type_list=[]
			this.service_list=[]
			this.area_list=[]
			bug({
				pending:this.pending
			}).then(response => {
				if(response.status == 'success'){
					this.power = sessionStorage.getItem('power').split(',')
					this.initTableList = response.data.data;
					this.tableTotal = response.data.totalCount
				}
			})
			bugOptions().then(res => {
				let obj = res.data.status_list
				this.status_list = Object.keys(obj).map(item => {
					return {id:item,name:obj[item]}
				});

				res.data.area_list.filter(item => {
					this.area_list.push({name:item})
				})

				res.data.module_list.filter(item => {
					this.module_list.push({name:item})
				})

				res.data.probability_list.filter(item => {
					this.probability_list.push({name:item})
				})
				res.data.type_list.filter(item => {
					this.type_list.push({name:item})
				})

				res.data.bug_type_list.filter(item => {
					this.bug_type_list.push({name:item})
				})

				res.data.os_type_list.filter(item => {
					this.os_type_list.push({name:item})
				})

				res.data.service_list.filter(item => {
					this.service_list.push({name:item})
				})
			})
		},
		toDetails(data){
			this.$router.push(`/bugDetail/${data.id}`)
		},
		assign(data){
			this.$refs.assignForm.dialogFormVisible = true
			this.$refs.assignForm.initData(data)
		},
		recode(data){
			this.$refs.lineForm.dialogFormVisible = true
			this.$refs.lineForm.initData(4,data)
		},
		edit(data){
			this.$refs.bugForm.dialogFormVisible = true
			this.$refs.bugForm.initData(3,data)
		},
		rebut(data){
			this.$refs.rebutForm.dialogFormVisible = true
			this.$refs.rebutForm.initData(data)
		},
		verification(data){
			this.$refs.verificationForm.dialogFormVisible = true
			this.$refs.verificationForm.initData(data)
		},
		getLeader(data){
			if(data){
				return data['name']
			}
			else {
				return '暂无'
			}
		},
		getName(data){
			if(data){
				return data['name']
			}else {
				return '暂无'
			}
		}
	},
	computed: {
	},

}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}
	.sea{
		width: 100%;
		padding: 20px;
		background-color: #fff;
		margin: 5px 0;
	}

}

</style>
